<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas" width="1080" height="630" style="border: 1px solid;"></canvas>
</body>

</html>
<script>

    const ctx = myCanvas.getContext('2d');

    let p1 = [300, 50];
    let p2 = [500, 50];

    vct = function (start, end) {
        let x = end[0] - start[0];
        let y = end[1] - start[1];
        return [x, y];
    };

    vctAdd = function (vct1, vct2) {
        return [vct1[0] + vct2[0], vct1[1] + vct2[1]];
    };

    /**
     * 获取 P 点 关于 O 点的对称点
     */
    getSymPnt = function ([x0, y0], [xP, yP]) {
        let vctPO = vct([xP, yP], [x0, y0]);
        let centerPnt = vctAdd([x0, y0], vctPO);
        return centerPnt;
    };

    let pnt = getSymPnt(p1, p2);

    ctx.font = "18px serif";
    ctx.lineWidth = 5;
    ctx.moveTo(p1[0], p1[1]);
    ctx.lineTo(p2[0], p2[1]);
    ctx.strokeStyle = "red";
    ctx.stroke();
    ctx.fillText("向量1", p2[0], p2[1] - 10);


    ctx.fillStyle = "blue";
    ctx.arc(pnt[0], pnt[1], 5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText("对称点", pnt[0], pnt[1] - 10);

</script>
<style>
    canvas {
        border: 1px solid #ccc;
        background-image: linear-gradient(90deg,
                #ffffb8 1%,
                rgba(0, 0, 0, 0) 5%),
            linear-gradient(#ffffb8 1%, rgba(0, 0, 0, 0) 5%);
        background-size: 28px 28px;
    }
</style>